<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../scirpt/tween.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            padding: 100px;
        }

        .div {
            width: 50px;
            height: 50px;
            background: red;
            transition: .1s;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="div"></div>
    </div>
    <script>
        /**
            element.transform={
                rorate:40,
                scale:100,
                skew:null,
                translate:null
            };
            console.log(element.transform.rotate);
            如果要获取transform相关的属性，那transform相关的设置也必须是通过该方法设置的
                    **/
        function cssTransform(element, attr, val) {
            if (!element.transform) {
                element.transform = {};
            }
            if (typeof val == "undefined") {
                if (!element.transform[attr]) {
                    switch (attr) {
                        case "scale":
                        case "scaleX":
                        case "scaleY":
                        case "scaleZ":
                            element.transform[attr] = 100;
                            break;
                        default:
                            element.transform[attr] = 0;
                    }
                }
                return element.transform[attr];
            } else {
                element.transform[attr] = val;
                var transformVal = "";
                for (var s in element.transform) {
                    // console.log(element.transform[s]);
                    switch (s) {
                        case "scale":
                        case "scaleX":
                        case "scaleY":
                        case "scaleZ":
                            transformVal += " " + s + "(" + element.transform[s] / 100 + ")";
                            break;
                        case "rotate":
                        case "rotateX":
                        case "rotateY":
                        case "roteteZ":
                        case "skewX":
                        case "skewY":
                            transformVal += " " + s + "(" + element.transform[s] + "deg)";
                            break;
                        default:
                            transformVal += " " + s + "(" + element.transform[s] + "px)";
                    }

                }

                element.style.WebkitTransform = element.style.transform = transformVal;
            }
        }
        document.addEventListener("touchstart", function (ev) {
            ev.preventDefault();
        });
        window.onload = function () {
            var divs = document.querySelectorAll(".div");
            // console.log(getComputedStyle(divs[0])["transform"]);
            cssTransform(divs[0], "scale", 200);
            console.log(cssTransform(divs[0], "scale"));
            divs[0].addEventListener("touchend", function () {
                // this.style.WebkitTransform = this.style.transform = "scale(.5) translate(100px)";
            });

        }

        function css(element, attr, val) {
            if(attr=="scale"||attr=="scaleX"
            ||attr=="scaleY"||attr=="scaleZ"
            ||attr=="rotateX"||attr=="rotateY"
            ||attr=="rotateZ"||attr=="rotate"
            ||attr=="skewX"||attr=="skewY"
            ||attr=="translateX"||attr=="translateY"
            ||attr=="translateZ"||attr=="translate"
            ){
                
            }
            if (arguments.length == 2) {
                var val = getComputedStyle(element)[attr];
                if (attr = "opacity") {
                    val = Math.round(val * 100);
                }
                return parseFloat(val);
            }
            if (attr == "opacity") {
                element.style.element = val / 100;
            } else {
                element.style[attr] = val + "px";
            }
        }
    </script>
</body>

</html>